<template>
  <div id="unpaid">
    <div v-if="!isWX" class="bra"></div>
    <!-- mobile -->
    <div class="mobile" :class="{ topBrace: isWX }">
      <div class="order-item" v-for="item in currentData" :key="item.id">
        <div class="order-item-top">
          <span>订单号：{{ item.order_sn }}</span>
          <span>未支付</span>
        </div>

        <div class="order-item-center">
          <img :src="show_url + item.images[0]" />
          <div class="orderInfo">
            <p>
              <span>{{ descSubstring(item.goods_name) }}</span>
              <span>
                {{ descSubstring(item.goods_desc) }}
              </span>
            </p>
            <p>
              <span>¥</span><span>{{ item.price }}</span>
            </p>
          </div>
        </div>

        <div class="order-item-bottom">
          <el-button class="orderClick" @click="gotoShowCollection(item)">去支付</el-button>
          <el-button class="orderClick" @click="openResetOrderDialog(item)">取消订单</el-button>
        </div>
      </div>

      <div class="nullBox" v-if="currentData.length <= 0">
        <img src="@/assets/images/mobile_black/center/null.png" />
        <p>暂无未支付的商品哦～</p>
      </div>
    </div>

    <el-dialog class="m_resetOrderDialog" :visible="isResetOrderDialog" top="33vh" center
      :before-close="closeResetOrderDialog" :show-close="false" :close-on-click-modal="false">
      <div class="dialog_title">
        <img @click="closeResetOrderDialog" src="@/assets/images/pc_black/auth/close.png" />
      </div>

      <div class="dialog_center">
        <p class="center_content">
          您确认取消订单吗？
        </p>
        <div class="dialog_btn">
          <button @click="resetOrder">确定</button>
          <button @click="closeResetOrderDialog">取消</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMyOrderListApi,
  cashierPayApi,
  bankcardInfoApi,
  unifiedAplipayOrderApi,
  resetOrderApi,
} from "@/api";
import { iscode, isWeixin, escapeHTML, getWidth } from "@/utils";
import { mapState, mapMutations } from "vuex";
import baseUrl from "@/utils/baseUrl.js";

export default {
  name: "Unpaid",
  data() {
    return {
      // 当前拥有的商品
      currentData: [],
      // 图片地址
      show_url: "",
      // 当前默认页
      currentPage: 1,
      // 每页显示多少条
      perPage: 10000,
      // 是否是微信
      isWX: false,
      // 1是pc 2是手机
      platform: 1,
      // 是否显示取消订单弹窗
      isResetOrderDialog: false,
      // 订单id
      order_id: "",
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  created() {
    if (isWeixin()) {
      this.isWX = true;
    } else {
      this.isWX = false;
    }
    if (getWidth() <= 768) {
      this.platform = 2;
    } else {
      this.platform = 1;
    }
  },
  mounted() {
    this.getMyOrderList();

    let cardCount = JSON.parse(localStorage.getItem("cardCount"));
    cardCount.wait_pay_num = this.userInfo.wait_pay_num;
    localStorage.setItem("cardCount", JSON.stringify(cardCount));
  },
  methods: {
    // ----- vuex ------
    ...mapMutations(["setCouponId"]),

    // -----异步相关方法-----
    // 获取订单列表
    async getMyOrderList() {
      let result = await getMyOrderListApi({
        page: this.currentPage,
        pagesize: this.perPage,
        status: 0, //"status":-1 已取消 1已支付 0未支付, 不传该字段为全部
      });
      if (iscode(result)) {
        this.show_url = result.result.show_url;
        this.total = result.result.count;
        this.currentData = result.result.list;

        // 去除末尾的 #0
        this.currentData.map(item => {
          this.$set(item, "goods_name", item.goods_name.split("#")[0]);
        });
      }
    },
    // 去支付
    async cashierPay(order_sn, user_coupon_id) {
      let res = await cashierPayApi({
        order_sn,
        coupon_id: user_coupon_id ?? "",
      });
      if (iscode(res)) {
        window.location.href = res.result.redirectUrl;
      }
    },
    // 获取银行卡信息
    async bankcardInfo(order_sn, coupon_id) {
      let res = await bankcardInfoApi({
        order_sn,
      });
      if (iscode(res)) {
        this.setCouponId(coupon_id ?? "");

        if (res.result.list.length > 0) {
          this.$router.push({
            path: "/mail/selectCard",
            query: { order_sn },
          });
        } else {
          this.$router.push({
            path: "/mail/bindCard",
            query: { order_sn },
          });
        }
      }
    },
    // 阿里支付
    async useAlipay(order_sn, user_coupon_id) {
      // let alipayBaseURL = "";
      // if (user_coupon_id) {
      //   alipayBaseURL =
      //     baseUrl.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     order_sn +
      //     "/" +
      //     this.platform +
      //     "/" +
      //     user_coupon_id;
      // } else {
      //   alipayBaseURL =
      //     baseUrl.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     order_sn +
      //     "/" +
      //     this.platform;
      // }

      // window.location.href = alipayBaseURL;

      let res = await unifiedAplipayOrderApi({
        order_sn,
        platform: this.platform,
        coupon_id: user_coupon_id ?? "",
      });
      if (iscode(res)) {
        const divForm = document.getElementsByTagName("alidiv");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement("div");
        div.innerHTML = res.result; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit();
        document.body.removeChild(div);
      }
    },
    // 取消订单
    async resetOrder() {
      let res = await resetOrderApi({ id: this.order_id });
      if (iscode(res)) {
        this.$toast({
          message: "取消订单成功",
          duration: 2000,
        });
        this.closeResetOrderDialog();
        this.getMyOrderList();
        // window.location.reload()
      }
    },

    // ----- common ------
    // 打开取消订单弹窗
    openResetOrderDialog(payload) {
      this.order_id = payload.id;
      this.isResetOrderDialog = true;
    },
    // 关闭取消订单弹窗
    closeResetOrderDialog() {
      this.isResetOrderDialog = false;
    },
    // 截取desc
    descSubstring(desc) {
      let res = escapeHTML(desc);
      let result = "";
      if (res.length > 30) {
        result = res.substring(0, 30) + "...";
        return result;
      } else {
        return res;
      }
    },

    // -----跳转相关的方法-----
    // 跳转到去支付界面
    gotoShowCollection(product) {
      // 1支付宝 2微信 4首信易
      if (product.pay_type == 1) {
        this.useAlipay(product.order_sn, product.user_coupon_id);
      } else if (product.pay_type == 4) {
        this.cashierPay(product.order_sn, product.user_coupon_id);
      } else if (product.pay_type == 6) {
        this.bankcardInfo(product.order_sn, product.user_coupon_id);
      } else {
        this.$router.push({
          path: "/mail/productDetail",
          query: { id: product.goods_id, order_sn: product.order_sn },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bra {
  width: 100%;
  height: 90px;
}

// mobile (<=768px)
@media screen and (max-width: 768px) {
  #unpaid {
    position: absolute;
    // top: 90px;
    bottom: 0;
    width: 100%;
    height: 100%;
    // overflow: scroll;

    .topBrace {
      margin-top: 90px !important;
    }

    // mobile wrapper
    .mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 40px 30px 20px 30px;

      // 每一条订单
      .order-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #2b2c2d;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        margin-bottom: 30px;
        padding: 0 30px;

        // top
        .order-item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 84px;
          border-bottom: 2px solid #333333;

          span {
            font-size: 24px;
            color: #aaaaaa;
            line-height: 24px;
          }

          span:nth-child(1) {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            max-width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span:nth-child(2) {
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #f24038;
          }
        }

        // center
        .order-item-center {
          display: flex;
          align-items: center;
          height: 238px;
          border-bottom: 2px solid #333333;

          img {
            width: 180px;
            height: 180px;
          }

          .orderInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 30px;
            height: 180px;
            width: 420px;

            p {
              margin: 0;
            }

            p:nth-child(1) {
              display: flex;
              flex-direction: column;

              span:nth-child(1) {
                width: 420px;
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              span:nth-child(2) {
                width: 420px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 24px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 20px;
              }
            }

            p:nth-child(2) {
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              line-height: 28px;

              span:nth-child(1) {
                font-size: 20px;
              }

              span:nth-child(2) {
                font-size: 24px;
                margin-left: 3px;
              }
            }
          }
        }

        // bottom
        .order-item-bottom {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          height: 106px;

          .orderClick {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 132px;
            height: 44px;
            border-radius: 4px;
            border: 1px solid #00ffb0;
            backdrop-filter: blur(3px);
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            line-height: 24px;
            background: none;
          }

          .orderClick:nth-child(2) {
            border: 1px solid #f24038;
            color: #f24038;
          }
        }
      }
    }

    // 数据空时的提示语
    .nullBox {
      margin: 194px auto 0 auto;

      img {
        width: 430px;
        height: 400px;
      }

      p {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
        margin-top: 50px;
        text-align: center;
      }
    }

    .m_resetOrderDialog {
      /deep/.el-dialog {
        max-width: 650px;
        width: 650px;
        height: 370px;
        background: #1e2020;
        border-radius: 10px;

        .el-dialog__header {
          display: none;
        }

        .el-dialog__body {
          margin: 0;
          padding: 0;

          .dialog_title {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            padding: 30px 30px 0 0;

            img {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
          }

          .dialog_center {
            position: relative;
            width: 100%;
            padding-top: 50px;

            .center_content {
              padding: 0 20px;
              font-size: 30px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 40px;
              text-align: center;
            }

            .dialog_btn {
              display: flex;
              justify-content: space-between;
              margin-top: 80px;
              padding: 0 70px;

              button {
                width: 190px;
                height: 64px;
                font-size: 28px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 28px;
                border-radius: 3px;
                cursor: pointer;
              }

              button:nth-child(2) {
                background: #1e2020;
                border: 1px solid #666666;
                color: #999999;
              }

              button:nth-child(1) {
                background: #00ffb0;
                border: none;
                color: #1e2020;
              }
            }
          }
        }
      }
    }

    /deep/.el-dialog__wrapper {
      background: rgba(0, 0, 0, 0.8);
    }
  }
}
</style>
